<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        color: rgb(76, 87, 102);
      }
      input {
        width: 300px;
        height: 30px;
        border-color: rgb(231, 236, 241);
      }
      .content {
        width: 767px;
        height: 230px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgb(76, 87, 102);
      }
      .left {
        width: 300px;
        height: 230px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .right {
        width: 300px;
        height: 230px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .button {
        margin-top: 100px;
        margin-left: 564px;
      }
      button {
        width: 100px;
        height: 40px;
        border-radius: 5px;
        font-size: 18px;
        border-color: rgb(231, 236, 241);
        background-color: skyblue;
      }
      select {
        margin-top: 46px;
        width: 100px;
        height: 30px;
        border-color: rgb(231, 236, 241);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>添加学员</h3>
      <hr />
      <div class="content">
        <div class="left">
          姓名：<br />
          <input
            type="text"
            name="username"
            placeholder="请输入姓名"
            v-model="username"
          /><br />
          年龄:<br />
          <input type="text" placeholder="请输入年龄" v-model="age" /><br />
          期望薪资:<br />
          <input type="text" placeholder="请输入期望薪资" v-model="hopeMoney" />
        </div>
        <div class="right">
          性别：<br />
          <label for="nan"
            ><input
              type="radio"
              id="nan"
              value="1"
              name="gender"
              v-model="gender"
            />男</label
          >
          <label for="nv"
            ><input
              type="radio"
              id="nv"
              value="2"
              name="gender"
              v-model="gender"
            />女</label
          ><br />
          组号: <br /><input
            type="text"
            placeholder="请输入1-8组号"
            v-model="group"
          />
          <br />
          就业薪资:<br />
          <input type="text" placeholder="请输入就业薪资" v-model="jobMoney" />
        </div>
      </div>

      籍贯:
      <select v-model="provinceCode" @change="changeCity()">
        <option
          :value="item.value"
          v-for="(item,index) in provinceList"
          :key="index"
        >
          {{item.label}}
        </option>
      </select>
      <select v-model="cityCode" @change="changeArea()">
        <option
          :value="item.value"
          v-for="(item,index) in cityList"
          :key="index"
        >
          {{item.label}}
        </option>
      </select>
      <select v-model="areaCode">
        <option
          :value="item.value"
          v-for="(item,index) in areaList"
          :key="index"
        >
          {{item.label}}
        </option></select
      ><br />
      <div class="button">
        <button>取消</button>
        <button @click="store">确认</button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/element-china-area-data/dist/element-china-area-data.iife.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 步骤6-读取里面数据
树形结构    
elementChinaAreaData = {
    regionData: [
        //最外层是省
        {value,label:'四川省',children: [
            {value,label: '成都市', children: [
                {value,label:'青羊区'}
            ]}
        ]}
    ]
}

-->
    <script>
      let app = new Vue({
        el: "#app",
        data: {
          username: "高千亿",
          age: 18,
          hopeMoney: "十一个亿",
          gender: 1, //1--男  2--女
          group: 1, //1-8
          jobMoney: "十个亿",

          //省市区数据
          provinceList: elementChinaAreaData.regionData,
          cityList: [],
          areaList: [],
          provinceCode: undefined, //省的选中值
          cityCode: undefined, //市的选中值
          areaCode: undefined, //去的选中值
        },
        created() {
          console.log(this.provinceList);
          this.provinceList.forEach((el) => {
            console.log(el);
          });
        },
        methods: {
          // 本地存储
          store() {
            let obj = {
              username: this.username,
              age: this.age,
              hopeMoney: this.hopeMoney,
              gender: this.gender == 1 ? "男" : "女",
              group: this.group,
              jobMoney: this.jobMoney,
              provinceCode: this.provinceCode,
              cityCode: this.cityCode,
              areaCode: this.areaCode,
            };
            localStorage.setItem("a", JSON.stringify(obj));
          },
          // 如果省下拉选框发生改变，则联动省相应的市的列表
          changeCity() {
            let checkedProvince = this.provinceList.find((el) => {
              return el.value === this.provinceCode;
            });
            console.log("checkedProvince", checkedProvince);
            this.cityList = checkedProvince.children;
          },
          // 如果市的下拉选框发生改变，则联动市相应的区列表
          changeArea() {
            checkedCity = this.cityList.find((el) => {
              return el.value === this.cityCode;
            });
            this.areaList = checkedCity.children;
          },
        },
      });
    </script>
  </body>
</html>
